<template>
  <Manage>
    <template #upCard>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input v-model="page.id" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态">
              <!-- <el-input v-model="page.name" placeholder="请选择" /> -->
              <el-select v-model="page.status" style="width:100%">
                <el-option
                  v-for="item in setMap.orderStatus"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付费状态">
              <el-select v-model="page.paymentStatus" style="width:100%">
                <el-option label="未付" :value="1" />
                <el-option label="已付" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人姓名">
              <el-input v-model="page.senderName" placeholder="请输入发件人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人电话">
              <el-input v-model="page.senderPhone" placeholder="请输入发件人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人地址">
              <sendAddress ref="senderAddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人姓名">
              <el-input v-model="page.receiverName" placeholder="请输入收件人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话">
              <el-input v-model="page.receiverPhone" placeholder="请输入收件人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人地址">
              <receiveAddress ref="receiverAddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #downCard>
      <el-table
        v-loading="loading"
        :data="orderData"
        stripe
        :header-cell-style="{background:'#f8faff',color:'#818693'}"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="transportOrder" label="运单编号" :formatter="(row)=>row.transportOrder.id" />
        <el-table-column prop="estimatedArrivalTime" label="下单时间" />
        <el-table-column prop="status" label="订单状态" :formatter="(row)=>setMap.orderStatus.find(item=>item.id===row.status).label" />
        <el-table-column prop="senderName" label="发件人姓名" />
        <el-table-column prop="senderPhone" label="发件人电话" />
        <el-table-column prop="senderAddress" label="发件人地址" />
        <el-table-column prop="receiverName" label="收件人姓名" />
        <el-table-column prop="receiverPhone" label="收件人电话" />
        <el-table-column prop="receiverAddress" label="收件人地址" />
        <el-table-column prop="pickUpType" label="取件类型">
          <template #default="{row}">
            <span>{{ row.pickUpType===1?'网点自寄':'上门取件' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付费类型">
          <template #default="{row}">
            <span>{{ row.paymentMethod===1?'预结':'到付' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态">
          <template #default="{row}">
            <span>{{ row.paymentStatus===1?'未付':'已付' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <!-- <a href="javascript:void(0);" style="color:#419eff;">作业范围分配</a> -->
            <router-link
              :to="{
                path:'/business/edit-order',
                query:{
                  orderId:row.id,
                  status:row.status,
                  pickUpType:row.pickupType,
                  transportOrderId:null
                }
              }"
              style="color:#419eff;"
            >查看详情</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </template>
  </Manage>
</template>

<script>
import { getOrder } from '@/api/business'
import receiveAddress from './components/Address'
import sendAddress from './components/Address'
import setMap from '@/constant/setMap'
export default {
  components: {
    receiveAddress,
    sendAddress
  },
  data() {
    return {
      setMap,
      page: {
        id: '',
        page: 1,
        pageSize: 10,
        paymentStatus: '',
        pickUpType: '',
        receiverName: '',
        receiverPhone: '',
        senderPhone: '',
        status: ''
      },
      receiverAddress: {
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: ''
      },
      senderAddress: {
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: ''
      },
      counts: 0,
      tree: [],
      orderData: [],
      loading: false
    }
  },
  created() {
    this.initOrderData()
  },
  methods: {
    // 快递员管理表格
    async initOrderData() {
      this.loading = true
      try {
        const res = await getOrder({ ...this.page, ...this.receiverAdress, ...this.senderAddress })
        // console.log(res)
        this.orderData = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    // 搜索
    search() {
      const { selectProvince: receiverProvinceId,
        selectCity: receiverCityId,
        selectArea: receiverCountyId } = this.$refs.receiverAddress.selectAddress
      this.receiverAdress = {
        receiverProvinceId,
        receiverCityId,
        receiverCountyId
      }
      const { selectProvince: senderProvinceId,
        selectCity: senderCityId,
        selectArea: senderCountyId } = this.$refs.senderAddress.selectAddress
      this.senderAddress = {
        senderProvinceId,
        senderCityId,
        senderCountyId
      }
      this.initOrderData()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initOrderData()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initOrderData()
    },
    reset() {
      this.page = {
        id: '',
        page: 1,
        pageSize: 10,
        paymentStatus: '',
        pickUpType: '',
        receiverName: '',
        receiverPhone: '',
        senderPhone: '',
        status: ''
      }
      this.receiverAddress = {
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: ''
      }
      this.senderAddress = {
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: ''
      }
      this.initOrderData()
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
